<template>
  <div class="service-template-wrapper">
    <div class="fr clearfix mb15">
      <bk-form form-type="inline">
        <bk-form-item label="业务">
          <bk-select
            v-model="biz_id"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="handleBizChange"
            ext-popover-cls="select-popover-custom"
            searchable>
            <bk-option
              v-for="item in biz_list"
              :key="item.bk_biz_id"
              :id="item.bk_biz_id"
              :name="item.bk_biz_id + '-' + item.bk_biz_name"></bk-option>
          </bk-select>
        </bk-form-item>
        <bk-form-item label="分类ID">
          <bk-input
            v-model="category_id"
            placeholder="可选，服务分类ID"
            style="width: 180px;" />
        </bk-form-item>
        <bk-form-item label="搜索">
          <bk-input
            v-model="search"
            placeholder="服务模板名称"
            style="width: 180px;" />
        </bk-form-item>
        <bk-form-item>
          <bk-button theme="primary" title="查询" @click="searchTemplates">查询</bk-button>
        </bk-form-item>
      </bk-form>
    </div>

    <bk-table
      style="margin-top: 15px;"
      :data="template_list"
      :size="size"
      :pagination="pagination"
      @page-change="handlePageChange">
      <bk-table-column label="模板ID" prop="id" />
      <bk-table-column label="模板名称" prop="name" />
      <bk-table-column label="分类ID" prop="service_category_id" />
      <bk-table-column label="创建人" prop="creator" />
      <bk-table-column label="操作" width="120">
        <template slot-scope="props">
          <bk-button theme="primary" text @click="showDetail(props.row)">详情</bk-button>
        </template>
      </bk-table-column>
    </bk-table>

    <bk-sideslider
      :is-show.sync="isSidesliderShow"
      :title="'服务模板详情'"
      :show-mask="false"
      :width="600"
      direction="right">
      <template slot="content">
        <div class="step-detail-container" v-if="detail">
          <div class="step-detail-item"><strong>ID：</strong>{{ detail.id }}</div>
          <div class="step-detail-item"><strong>名称：</strong>{{ detail.name }}</div>
          <div class="step-detail-item"><strong>分类ID：</strong>{{ detail.service_category_id }}</div>
          <div class="step-detail-item"><strong>创建人：</strong>{{ detail.creator }}</div>
          <div class="step-detail-item"><strong>描述：</strong>{{ detail.description || '无' }}</div>
        </div>
      </template>
    </bk-sideslider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small',
      biz_list: [],
      biz_id: null,
      category_id: '',
      search: '',
      template_list: [],
      detail: null,
      isSidesliderShow: false,
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.getBizData();
  },
  methods: {
    async getBizData() {
      try {
        const res = await this.$store.dispatch('example/getBizData', {}, { fromCache: true });
        this.biz_list = res.data.info || [];
      } catch (e) {
        this.biz_list = [];
      }
    },
    async searchTemplates(page = 1) {
      if (!this.biz_id) {
        this.$bkMessage({ theme: 'warning', message: '请选择业务' });
        return;
      }
      const params = {
        bk_biz_id: this.biz_id,
        page,
        page_size: this.pagination.limit,
      };
      if (this.category_id) params.category_id = this.category_id;
      if (this.search) params.search = this.search;
      try {
        const res = await this.$store.dispatch('example/getServiceTemplatesList', params);
        if (res.result) {
          this.template_list = res.data.info || res.data.results || [];
          this.pagination.count = res.data.count || (res.data.info ? res.data.info.length : 0);
          this.pagination.current = page;
        } else {
          this.template_list = [];
          this.pagination.count = 0;
        }
      } catch (e) {
        this.template_list = [];
        this.pagination.count = 0;
      }
    },
    handleBizChange(newValue) {
      this.biz_id = newValue;
      this.searchTemplates(1);
    },
    handlePageChange(page) {
      this.searchTemplates(page);
    },
    showDetail(row) {
      this.detail = row;
      this.isSidesliderShow = true;
    },
  },
};
</script>

<style scoped>
.service-template-wrapper {
  padding: 24px;
}
.step-detail-container {
  padding: 20px;
}
.step-detail-item {
  margin-bottom: 12px;
}
</style>